<template>
	<view class="crafts">
		<nav-bar  backState="2000">
			<view slot="right" style="margin-right: 20upx; width: 75vw;display: flex;flex-direction: row;justify-content: space-between;">
			
				<view style="width: 70%;">
					<uni-segmented-control :current="valueModel" :values="tabItemStr" :style-type="styleType" active-color="#007aff" @clickItem="radioChange" />
				</view>
			</view>
		</nav-bar>

<!-- 		<view class="tool-btn">
			<radio-group class="radios" @change="radioChange">
				<label class="radio">
					<radio value="1" checked="true" />除尘器</label>
				<label class="radio">
					<radio value="2" />RTO</label>
			</radio-group>
		</view> -->
		
		<scroll-view class="scroll-view" :scroll-x="true" :scroll-y="true">
			
			<view class="main-cont1" v-if="valueModel == '0'" >
				<view class="meter" v-for="(i, index) in tableData" :key="index" :id="i.DeviceName" v-if="
			    (i.DeviceName === 'PT-1001' || i.DeviceName === 'TT-1001') &&
			    valueModel == '0'
			  ">
					<span>{{ i.DeviceName }}</span>
					<p>
						<i :class="getStatus(i) ? 'r' : 'g'">{{ i.QValue }}</i>{{ i.Unit }}
					</p>
				</view>
			</view>
			
			<view class="main-cont2" v-if="valueModel == '1'" >
				<view class="meter" v-for="(i, index) in tableData" :key="index" :id="i.DeviceName" v-if="
			    i.DeviceName !== 'PID-1001' &&
			    i.DeviceName !== 'PT-1001' &&
			    i.DeviceName !== 'TT-1001' &&
			    i.DeviceName !== 'PT-1008' &&
			    i.DeviceName !== 'TT-1009' &&
			    i.DeviceName !== 'PT-1009' &&
			    valueModel == '1'
			  ">
					<span>{{ i.DeviceName }}</span>
					<p>
						<i :class="getStatus(i) ? 'r' : 'g'">{{ i.QValue }}</i>{{ i.Unit }}
					</p>
				</view>
			</view>
		</scroll-view>


	</view>
</template>
<script>
	import {
		getDeviceList,
	} from '@/services/instrument.js';
	import CONSTS from '@/common/biz/consts.js'

	export default {
		name: "crafts",
		data() {
			return {
				tabItemStr: ['除尘器', 'RTO'],
				current: 0,
				
				valueModel: 0,
				tableData: [],
				styleType: 'button',
				activeColor: '#007aff',
			};
		},
		onShow() {
			this.setTimer();
		},
		onHide() {
			clearInterval(this.timer);
		},
		methods: {
			radioChange(e) {
				// debugger
				// console.log(e)
				this.valueModel = e.currentIndex
			},


			getStatus(row) {
				if (
					parseFloat(row.QValue) < parseFloat(row.OfflineValues) ||
					parseFloat(row.QValue) > parseFloat(row.OnlineValue)
				) {
					return true;
				} else {
					return false;
				}
			},
			setTimer() {
				this.timer = setInterval(() => {
					this.getdevicelist();
				}, 3000);
			},
			getdevicelist() {
				getDeviceList({
						MileageID: CONSTS.DEFAULT_MODEL_ID,
						page: 1,
						linit: 50,
						Type: 2,
					})
					.then((res) => {
						// debugger
						if (res.code == 0) {
							this.tableData = res.data;
						}
					});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.scroll-view {
		background: #2C405A;
		width: 100vw;
		height: 100%;
		
	    overflow: hidden;
	    white-space: nowrap;
	}
	
	.radios {
		width: 100vw;
		// background-color: #4CD964;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	
	.crafts {
		height: 100%;
		position: relative;
		width: 2530px;
		display: flex;
		flex-direction: column;

		.tool-btn {
			display: flex;
			padding:15upx
		}

		.main-cont1,
		.main-cont2 {
			width: 175vh;
			// height: calc(100vh - 180px);
			height: 100%;
			// padding: -20px;
			position: relative;
		}

		.main-cont1 {
			padding-top: 0upx;
			background: url('~@/static/huayi_img/chuchenqi.png') no-repeat center 50%;
			background-size: contain;
		}

		// background: url('~@/static/login_bg.png') no-repeat;
		.main-cont2 {
			padding-top: 0upx;
			background: url('~@/static/huayi_img/rto.png') no-repeat center 50%;
			background-size: contain;
		}
	}
	
	.meter {
		position: absolute;
		// top: 0;
		// left: 0;
		border: 1px solid #fff;
		width: 176upx;
		// height: 54px;
		background: rgba(20, 71, 165, 0.63);
		display: flex;
		flex-direction: column;
		border-radius: 4px;
		box-sizing: border-box;
		z-index: 1000;
	
		span,
		p {
			height: 26px;
			line-height: 26px;
			text-align: left;
			color: #fff;
			padding: 0 5px;
			box-sizing: border-box;
		}
	
		span {
			border-bottom: 1px solid #fff;
			font-size: 13px;
		}
	
		p {
			font-size: 12px;
	
			i {
				font-style: normal;
				font-size: 16px;
				margin-right: 3px;
			}
	
			.g {
				color: rgba(27, 189, 107, 1);
			}
	
			.r {
				color: rgba(237, 65, 19, 1);
			}
		}
	}
	
	#PT-1004 {
		right: 23%;
		bottom: 27%;
	}
	
	#TT-1004 {
		right: 11%;
		bottom: 27%;
	}
	
	#PT-1006 {
		left: 16%;
		top: 18%;
	}
	
	#PT-1007 {
		right: 4%;
		top: 35%;
	}
	
	#TT-1006 {
		top: 18%;
		left: 24%;
	}
	
	#TT-2002 {
		top: 1%;
		right: 42%;
	}
	
	#TT-2001 {
		right: 47.5%;
		top: 12%;
	}
	
	#TT-1007 {
		right: 46%;
		top: 20%;
	}
	
	#TT-1008 {
		right: 47.5%;
		top: 35%;
	}
	
	#PT-1003 {
		right: 12%;
		bottom: 39.5%;
	}
	
	#TT-1003 {
		right: 4%;
		bottom: 39.5%;
	}
	
	#TT-2003 {
		right: 23%;
		top: 18%;
	}
	
	#PT-1005 {
		left: 6%;
		bottom: 39%;
	}
	
	#TT-1005 {
		left: 20%;
		bottom: 39%;
	}
	
	#PT-1002B {
		left: 43%;
		bottom: 19%;
	}
	
	#PT-1002A {
		left: 21%;
		bottom: 19%;
	}
	
	#TT-1002 {
		left: 22%;
		bottom: 19%;
	}
	
	#LNG {
		top: -4%;
		left: 24.5%;
	}
	
	#PT-1001 {
		top: 44%;
		left: 5%;
	}
	
	#TT-1001 {
		top: 44%;
		left: 13%;
	}
	

</style>
